<template>
	<view class="login" @touchmove.stop.prevent="">
		<!-- <image class="login-bg" src="/static/denglu/close.png" mode="" @click="goback"></image> -->
		<view class="login-content">
			<view class="login-content-header" @click="goback" style="padding-top:10px">
				<image class="login-content-header-close" src="https://x.bilinmeiju.com/static/denglu/close.png"
					mode=""></image>
			</view>
			<view class="login-content-box">
				<view class="login-content-box-phone">
					欢迎进入<text>比邻美居智慧社区</text>
				</view>
				<!-- <view class="login-content-box-phone">
					179****0288
				</view>
				<text class="login-content-box-text">认证服务由中国电信提供</text> -->
				<view class="login-content-box-button active" @click="gowxlogin" v-if="wxlogin">
					微信一键登录
				</view>

				<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
					class="login-content-box-button active" v-if="!wxlogin">
					微信绑定手机号登录
				</button>
				<view class="login-content-box-button" @click="goPage('/pages/login/zhuce')">
					其它手机号登录
				</view>
				<view class="login-content-box-checkbox" @click="xuanze">
					<image v-show="!state" src="https://x.bilinmeiju.com/static/denglu/wzx.png" mode=""></image>
					<image v-show="state" src="https://x.bilinmeiju.com/static/denglu/xz.png" mode=""></image>
					<view class="login-content-box-checkbox-text">
						我已阅读并同意<text>《比邻美居用户隐私协议》</text>及<text>《比邻美居用户许可协议》</text>
					</view>
				</view>
				<!-- <view class="login-content-box-wechat">
					<image src="/static/wechat.png" mode=""></image>
					<text>微信登录</text>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				state: true,
				wxlogin: false,
				shequ: '',
				communityId: '',
				top: 0,
				backnum: 1,
				options: {}
			};
		},
		// computed: {
		// 	statusBarHeight(){
		// 		return this.$store.state.statusBarHeight
		// 	},
		// 	menuButtonHeight(){
		// 		return this.$store.state.menuButtonHeight
		// 	},
		// 	menuButtonTop(){
		// 		return this.$store.state.menuButtonTop
		// 	}
		// },
		onLoad(options) {
			that = this;
			that.options = options;
			that.top = that.$bartop;
			console.log(that.top)
			if (options.backnum) that.backnum = options.backnum;
			wx.login({
				success(res) {
					if (res.code) {
						//发起网络请求
						that.$post('api/code2openid', {
							code: res.code
						}).then(result => {
							if (result.code === 0) {
								uni.setStorageSync('session_key', result.data.session_key);
								uni.setStorageSync('openid', result.data.openid);
								if (result.data.uid > 0) {
									that.wxlogin = true;
								}
							}
						})
					} else {
						console.log('登录失败！' + res.errMsg)
					}
				}
			})
		},
		methods: {
			gowxlogin() {
				if (this.state) {
					var openid = uni.getStorageSync('openid');
					uni.showLoading({
						title: '加载中...'
					})
					that.$post('api/wxlogin', {
						openid: openid
					}).then(res => {
						uni.hideLoading()
						if (res.code === 0) {
							uni.setStorageSync('token', res.data.token);
							if (res.data.shequ) uni.setStorageSync('shequ', res.data.shequ);
							if (res.data.communityId) uni.setStorageSync('communityId', res.data.communityId);

							uni.showToast({
								title: res.msg,
								icon: 'success'
							})
							setTimeout(function() {
								if (that.options.q) {
									uni.reLaunch({
										url: '/pages/fangchanbangding/add_code?code=' + that
											.options.q
									})
								} else {
									uni.switchTab({
										url: '/pages/index/home'
									})
								}

							}, 1200)
						} else {
							uni.showToast({
								title: res.msg
							})
						}
					})
				} else {
					uni.showToast({
						title: '请先勾选协议！',
						icon: 'none'
					})
				}
			},
			getPhoneNumber(e) {
				if (e.detail.errMsg != 'getPhoneNumber:ok') return false;
				uni.showLoading({
					title: '加载中...'
				})
				var data = {
					encryptedData: e.detail.encryptedData,
					iv: e.detail.iv,
					session_key: uni.getStorageSync('session_key'),
					openid: uni.getStorageSync('openid'),
					communityId: uni.getStorageSync('communityId'),
					shequ: uni.getStorageSync('shequ')
				}
				that.$post('api/wxphonelogin', data).then(res => {
					uni.hideLoading()
					if (res.code === 0) {
						uni.setStorageSync('token', res.data.token);
						if (res.data.shequ) uni.setStorageSync('shequ', res.data.shequ);
						if (res.data.communityId) uni.setStorageSync('communityId', res.data.communityId);
						uni.showToast({
							title: res.msg,
							icon: 'success'
						})
						setTimeout(function() {
							if (that.options.q) {
								uni.reLaunch({
									url: '/pages/fangchanbangding/add_code?code=' + that.options.q
								})
							} else {
								uni.switchTab({
									url: '/pages/index/home'
								})
							}
						}, 1200)

					} else {
						uni.showToast({
							title: res.msg
						})
					}
				})
			},
			goback() {
				uni.navigateBack({
					fail() {
						uni.switchTab({
							url: '/pages/index/home'
						})
					}
				})
			},
			goPage(url) {
				if (this.state) {
					uni.navigateTo({
						url
					})
				} else {
					uni.showToast({
						title: '请先勾选协议！',
						icon: 'none'
					})
				}

			},
			xuanze() {
				this.state = !this.state
			},
			denglu() {
				uni.switchTab({
					url: '/pages/index/home'
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
	}

	.login {
		margin-top: 90rpx;
		width: 100%;
		height: 100%;

		&-bg {
			margin-left: 20rpx;
			width: 24rpx;
			height: 24rpx;
			position: absolute;
			z-index: -1;
		}

		&-content {
			width: 100%;
			box-sizing: border-box;

			&-header {
				width: 100%;
				display: flex;
				align-items: center;
				padding: 0 32rpx;
				box-sizing: border-box;

				&-close {
					width: 30rpx;
					height: 30rpx;
				}
			}

			&-box {
				width: 580rpx;
				padding-top: 130rpx;
				display: flex;
				flex-direction: column;
				margin: 0 auto;

				&-phone {
					color: #000000;
					font-size: 36rpx;
					font-weight: bold;

					>text {
						color: #FE7B00;
					}
				}

				&-text {
					color: #999999;
					font-size: 24rpx;
					margin-top: 50rpx;
				}


				&-button {
					width: 100%;
					height: 88rpx;
					border-radius: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 32rpx;
					font-weight: normal;
					background: #EEEEEE;
					color: #999999;
					margin-top: 40rpx;
				}

				.active {
					margin-top: 100rpx;
					color: #fff;
					background: linear-gradient(to right, #FFAE45, #FE7B00);
				}

				&-checkbox {
					display: flex;
					align-items: center;
					margin-top: 40rpx;

					image {
						width: 30rpx;
						height: 30rpx;
						margin-right: 14rpx;
					}

					&-text {
						color: #666666;
						font-size: 24rpx;
						flex: 1;
						line-height: 40rpx;

						>text {
							color: #C98E1C;
						}
					}
				}

				&-wechat {
					position: absolute;
					bottom: 40rpx;
					left: 50%;
					transform: translateX(-50%);
					display: flex;
					flex-direction: column;
					align-items: center;

					image {
						width: 100rpx;
						height: 100rpx;
						margin-bottom: 20rpx;
					}

					text {
						color: #999999;
						font-size: 24rpx;
					}
				}
			}
		}


	}
</style>
